import { connect } from 'react-redux';
import { Component } from "react";
import { TopicWrapper,TopicItem } from "../style"

class Topic extends Component {
    render(){
        const {list} = this.props;
        return (
            <TopicWrapper>
                {
                    list.map((item)=>(
                        <TopicItem key={item.get('id')}>
                          <img 
                               className="topic-pic" 
                               alt=''
                               src={item.get('imgUrl')}
                          />
                          {item.get('title')}
                        </TopicItem>
                    ))
                }
            </TopicWrapper>
        )
    }
}

const mapState = (state) => {
    return{
        list:state.get('home').get('topicList'),
    }
}

export default connect(mapState, null)(Topic);